<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>%title%</title>
    <link rel="stylesheet" href="/stylesheets/element.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            width: 1200px;
            margin: 0 auto;
        }
        h1{
            text-align: center;
        }
        .hello{
            border: 1px solid #000;
            margin-bottom: 20px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <h1>接口测试页面</h1>

    <div id="app">
        <div class="hello">
            <h2>用户接口</h2>
            <div>
                <h3>登录</h3>
                <form action="users/login"  method="post" >
                    <input type="text" placeholder="用户名" name="username">
                    <input type="text" placeholder="密码" name="password">
                    <input type="submit">
                </form>
            </div>
            <div>
                <h3>注册</h3>
                <form action="users/register"  method="post" >
                    <input type="text" placeholder="用户名" name="username">
                    <input type="text" placeholder="密码" name="password">
                    <input type="text" placeholder="手机" name="iphone">
                    <input type="text" placeholder="邮箱" name="email">
                    <input type="text" placeholder="昵称" name="nickname">
                    <input type="text" placeholder="角色" name="role">
                    <input type="submit" value="注册">
                </form>
            </div>
            <div>
                <h3>修改</h3>
                <form action="users/update-account"  method="post" >
                    <input type="text" placeholder="id" name="id">
                    <input type="text" placeholder="用户名" name="username">
                    <input type="text" placeholder="密码" name="password">
                    <input type="text" placeholder="手机" name="iphone">
                    <input type="text" placeholder="邮箱" name="email">
                    <input type="text" placeholder="昵称" name="nickname">
                    <input type="text" placeholder="角色" name="role">
                    <input type="submit" value="修改">
                </form>
            </div>
            <el-table
                    :data="userList"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="ID"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="nickname"
                        label="昵称">
                </el-table-column>
                <el-table-column
                        prop="iphone"
                        label="手机">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱">
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="handleDelete(scope.row.id)" type="text" size="small">删除</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="hello">
            <h2>轮播图接口</h2>
            <el-table
                    :data="bannerList"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="ID"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="图片名字"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="target"
                        label="跳转路径">
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <img :src="scope.row.url" alt="" height="100"/>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="bannerDelete(scope.row.id)" type="text" size="small">删除</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- :on-exceed="handleExceed" :on-preview="handlePreview"-->
            <h3>新增</h3>
            <div style="width: 600px;margin: 0 auto;">
                <el-input v-model='form1.name' placeholder="图片名称"></el-input>
                <el-input v-model='form1.target' placeholder="跳转目标"></el-input>
            </div>
            <el-upload class="upload-demo" action="/banner/add" :limit="1" ref="upload" :auto-upload="false"
                       :file-list="fileList" :data="form1" :on-success="handlerSuccess" :on-exceed="handleExceed">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <el-button @click='submitUpload'>提交数据</el-button>
            <hr>
            <h3>修改</h3>
            <div style="width: 600px;margin: 0 auto;">
                <el-input v-model='form2.name' placeholder="图片名称"></el-input>
                <el-input v-model='form2.target' placeholder="跳转目标"></el-input>
            </div>
            <el-input v-model='urlId' placeholder="图片id"></el-input>
            <el-upload class="upload-demo" :action="'/banner/edit/'+urlId" :limit="1" ref="edit" :auto-upload="false"
                       :file-list="fileList" :data="form2" :on-success="handlerSuccess" :on-exceed="handleExceed">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <el-button @click='editUpload'>修改数据</el-button>
        </div>
        <div class="hello">
            <h2>文章接口</h2>
            <el-table
                    :data="articleList"
                    style="width: 100%"
                    type="expand"
            >
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <ul>
                            <li v-for="item in commentList" :key="item.id">
                                <p>评论人:{{item.nickname}},评论id{{item.id}}===>>>评论的谁的评论{{item.othernick}}</p>
                                <p>评论内容:{{item.content}}</p>
                                <p>评论日期:{{item.time}}-------点赞数{{item.like}}</p>
                                <button @click="deleteComment(item.id)">删除评论</button><button @click="handlerLike(item.id)">点赞</button>
                            </li>
                        </ul>
                        <button @click="getCommentList(scope.row.id)">获取评论</button>
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-input v-model='comment' placeholder="文章标题"></el-input>
                            <el-button @click="commentAdd(scope.row.id)" type="text" size="small">发表评论</el-button>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="ID"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="文章标题"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="content"
                        label="文章内容">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="文章类型">
                </el-table-column>
                <el-table-column
                        prop="likecount"
                        label="点赞数">
                </el-table-column>
                <el-table-column
                        prop="browsecount"
                        label="浏览量">
                </el-table-column>
                <el-table-column
                        label="文章图片">
                    <template slot-scope="scope">
                        <img :src="scope.row.url" alt="" height="100"/>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="articleDelete(scope.row.id)" type="text" size="small">删除</el-button>
                        <el-button @click="handleLike(scope.row.id)" type="text" size="small">点赞</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <h3>文章上传接口</h3>
            <div style="width: 600px;margin: 0 auto;">
                <el-input v-model='articleForm1.title' placeholder="文章标题"></el-input>
                <el-input v-model='articleForm1.type' placeholder="文章类型"></el-input>
                <el-input v-model='articleForm1.content' placeholder="文章内容" type="textarea"></el-input>
            </div>
            <el-upload class="upload-demo" action="/article/add" :limit="1" ref="articleAdd" :auto-upload="false"
                       :file-list="fileList" :data="articleForm1" :on-success="handlerSuccess" :on-exceed="handleExceed">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <el-button @click='articleAdd'>文章上传</el-button>
            <h3>文章修改接口</h3>
            <div style="width: 600px;margin: 0 auto;">
                <el-input v-model='articleId' placeholder="文章ID"></el-input>
                <el-input v-model='articleForm2.title' placeholder="文章标题"></el-input>
                <el-input v-model='articleForm2.type' placeholder="文章类型"></el-input>
                <el-input v-model='articleForm2.content' placeholder="文章内容" type="textarea"></el-input>
            </div>
            <p>1111-{{articleId}}</p>
            <el-upload class="upload-demo" :action="'/article/edit/'+articleId" :limit="1" ref="articleEdit" :auto-upload="false"
                       :file-list="fileList" :data="articleForm2" :on-success="handlerSuccess" :on-exceed="handleExceed">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <el-button @click='articleEdit'>文章修改</el-button>
        </div>
    </div>
    <script src="/javascripts/vue.js"></script>
    <script src="/javascripts/axios.js"></script>
    <script src="/javascripts/elelment.js"></script>
    <script>
        console.log(Vue);
        console.log(axios)
        new Vue({
            el:'#app',
            data:{
                comment:'',
                urlId:'',
                articleId:'',
                msg:"vue",
                userList:[],
                form1:{},
                fileList:[],
                bannerList:[],
                articleList:[],
                form2:{},
                articleForm1:{},
                articleForm2:{},
                commentList:[]
            },
            created(){
                this.getUserList()
                this.getBannerList()
                this.getArticleList()
            },
            methods:{
                //获取评论根据 文章的id
                getCommentList(parentid){
                    console.log('parentid',parentid)
                    axios.get('/comment/detail',{
                        params:{
                            parentid
                        }
                    }).then(res=>{
                        console.log('banner',res)
                        this.commentList = res.data
                    })
                },
                getUserList(){
                    axios.get('/users/accounts').then(res=>{
                        console.log('users',res)
                        this.userList = res.data.accounts
                    })
                },
                getBannerList(){
                    axios.get('/banner').then(res=>{
                        console.log('banner',res)
                        this.bannerList = res.data.data.results

                    })
                },
                getArticleList(){
                    axios.get('/article').then(res=>{
                        console.log('article',res)
                        this.articleList = res.data.data.results

                    })
                },
                handleDelete(id){
                    axios.post('/users/delete-account',{
                        id
                    }).then(res=>{
                        console.log(res)
                        if(res&&res.status==200){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getUserList()

                        }
                    })
                },
                articleDelete(id){
                    axios.post('/article/delete/'+id).then(res=>{
                        console.log(res)
                        if(res&&res.status==200){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getArticleList()
                        }
                    })
                },
                bannerDelete(id){
                    axios.post('/banner/delete/'+id).then(res=>{
                        console.log(res)
                        if(res&&res.status==200){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getBannerList()
                        }
                    })
                },
                submitUpload() {
                    this.$refs.upload.submit();
                },
               editUpload() {
                    this.$refs.edit.submit();
                },
                articleAdd() {
                    this.$refs.articleAdd.submit();
                },
                articleEdit() {
                    this.$refs.articleEdit.submit();
                },
                handlerSuccess(response, file, fileLis) {
                    console.log(response, file, fileLis);
                    if (response.status === 200) {
                        this.$message({
                            message: '数据添加成功',
                            type: 'success'
                        });
                    }
                },
                handleExceed() {
                    this.$message({
                        showClose: true,
                        message: '每次只允许上传一张图片',
                        type: 'warning'
                    });
                },
                //文章点赞
                handleLike(id){
                    axios.post('/article/like/'+id).then(res=>{
                        console.log(res)
                        if(res&&res.status==200){
                            this.$message({
                                message: '点赞成功',
                                type: 'success'
                            });
                            this.getArticleList()
                        }
                    })
                },
                commentAdd(id){
                    axios.post('/comment',{
                        content:this.comment,
                        parentid:id,
                        userid:1,
                        username:'admin',
                        nickname:'管理员',
                        otherid:'2',
                        otheruser:'zzz',
                        othernick:'张三',
                    }).then(res=>{
                        console.log(res)
                        if(res&&res.status==200){
                            this.$message({
                                message: '评论成功',
                                type: 'success'
                            });
                            this.getArticleList()
                        }
                    })
                },
                deleteComment(id){
                    // 删除评论
                    axios.post('/comment/delete/',{
                        id
                    }).then(res=>{
                        console.log(res)
                        if(res&&res.status==200){
                            this.$message({
                                message: '删除评论成功',
                                type: 'success'
                            });
                        }
                    })
                },
                handlerLike(id){
                    // 删除评论
                    axios.post('/comment/like',{
                        id
                    }).then(res=>{
                        console.log(res)
                        if(res&&res.status==200){
                            this.$message({
                                message: '点赞成功',
                                type: 'success'
                            });
                        }
                    })
                }
            }
        })
    </script>
</body>
</html>